<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket.IO 调试工具</title>
    <script src="{{ url_for('static', filename='js/socket.io/socket.io.min.js') }}"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .section {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        .section h3 {
            margin-top: 0;
            color: #555;
        }
        
        .send-section {
            background-color: #e8f5e8;
        }
        
        .receive-section {
            background-color: #e8f0ff;
        }
        
        textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-family: monospace;
            font-size: 14px;
            resize: vertical;
        }
        
        .send-data {
            height: 100px;
        }
        
        .receive-data {
            height: 300px;
            background-color: #f8f8f8;
            color: #333;
        }
        
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }
        
        button:hover {
            background-color: #0056b3;
        }
        
        .clear-btn {
            background-color: #dc3545;
        }
        
        .clear-btn:hover {
            background-color: #c82333;
        }
        
        .status {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .connected {
            background-color: #d4edda;
            color: #155724;
        }
        
        .disconnected {
            background-color: #f8d7da;
            color: #721c24;
        }
        
        .controls {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .event-selector {
            margin: 10px 0;
        }
        
        select {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔧 Socket.IO 调试工具</h1>
        
        <div class="controls">
            <span>连接状态: </span>
            <span id="status" class="status disconnected">未连接</span>
            <button id="reconnect-btn" onclick="reconnect()">重新连接</button>
        </div>
        
        <!-- 发送数据区域 -->
        <div class="section send-section">
            <h3>📤 发送数据</h3>
            
            <div class="event-selector">
                <label>选择事件: </label>
                <select id="event-select">
                    <option value="chat_message">chat_message</option>
                    <option value="command_event">command_event</option>
                    <option value="login_remote">login_remote</option>
                    <option value="test_event">test_event</option>
                    <option value="custom_event">custom_event</option>
                    <option value="join_room">join_room</option>
                </select>
                <span style="margin-left: 20px;">或自定义: </span>
                <input type="text" id="custom-event" placeholder="输入事件名">
            </div>
            
            <textarea id="send-data" class="send-data" placeholder='请输入要发送的JSON数据，例如:
{
    "msg": "Hello World",
    "type": "text",
    "room": "room1"
}'></textarea>
            
            <button onclick="sendData()">发送数据</button>
            <button onclick="sendPing()">发送Ping</button>
        </div>
        
        <!-- 接收数据区域 -->
        <div class="section receive-section">
            <h3>📥 接收数据 (实时显示)</h3>
            <textarea id="receive-data" class="receive-data" readonly></textarea>
            <button class="clear-btn" onclick="clearReceiveData()">清空接收区</button>
        </div>
    </div>

    <script>
        let socket;
        let messageCount = 0;
        
        // 初始化连接
        function initSocket() {
            socket = io();
            
            // 连接成功
            socket.on('connect', function() {
                updateStatus('已连接', true);
                addReceiveMessage('🟢 Socket连接成功 - ID: ' + socket.id);
            });
            
            // 连接断开
            socket.on('disconnect', function() {
                updateStatus('连接断开', false);
                addReceiveMessage('🔴 Socket连接断开');
            });
            
            // 监听所有可能的事件
            const events = [
                'server_received',
                'chat_message', 
                'test_event',
                'custom_event',
                'join_room',
                'error',
                'pong'
            ];
            
            events.forEach(event => {
                socket.on(event, function(data) {
                    addReceiveMessage(`📨 [${event}] ${JSON.stringify(data, null, 2)}`);
                });
            });
            
            // 捕获所有其他事件
            socket.onAny((event, ...args) => {
                if (!events.includes(event) && event !== 'connect' && event !== 'disconnect') {
                    addReceiveMessage(`📨 [${event}] ${JSON.stringify(args, null, 2)}`);
                }
            });
        }
        
        // 发送数据
        function sendData() {
            if (!socket.connected) {
                alert('Socket未连接，请先连接!');
                return;
            }
            
            const eventName = document.getElementById('custom-event').value || 
                             document.getElementById('event-select').value;
            const dataText = document.getElementById('send-data').value;
            
            if (!eventName) {
                alert('请选择或输入事件名!');
                return;
            }
            
            let data;
            try {
                data = dataText ? JSON.parse(dataText) : {};
            } catch (e) {
                alert('JSON格式错误: ' + e.message);
                return;
            }
            
            socket.emit(eventName, data);
            addReceiveMessage(`📤 发送: [${eventName}] ${JSON.stringify(data, null, 2)}`);
        }
        
        // 发送心跳测试
        function sendPing() {
            if (!socket.connected) {
                alert('Socket未连接!');
                return;
            }
            socket.emit('ping', {timestamp: Date.now()});
            addReceiveMessage('📤 发送: [ping] ' + JSON.stringify({timestamp: Date.now()}));
        }
        
        // 重新连接
        function reconnect() {
            if (socket) {
                socket.disconnect();
            }
            setTimeout(() => {
                initSocket();
            }, 500);
        }
        
        // 更新连接状态
        function updateStatus(text, isConnected) {
            const statusEl = document.getElementById('status');
            statusEl.textContent = text;
            statusEl.className = `status ${isConnected ? 'connected' : 'disconnected'}`;
        }
        
        // 添加接收消息
        function addReceiveMessage(message) {
            const receiveArea = document.getElementById('receive-data');
            const timestamp = new Date().toLocaleTimeString();
            messageCount++;
            
            const newMessage = `[${timestamp}] #${messageCount}\n${message}\n${'='.repeat(50)}\n`;
            receiveArea.value = newMessage + receiveArea.value;
        }
        
        // 清空接收区
        function clearReceiveData() {
            document.getElementById('receive-data').value = '';
            messageCount = 0;
        }
        
        // 页面加载时初始化
        window.onload = function() {
            initSocket();
            
            // 设置默认发送数据示例
            document.getElementById('send-data').value = JSON.stringify({
                "msg": "Hello from debug tool!",
                "type": "test"
            }, null, 2);
        };
    </script>
</body>
</html>